<template>
  <div class="todo-footer">
    <TodoStatistics :doingNum="doingNum" :doneNum="doneNum" />
    <TodoClearButton />
  </div>
</template>

<script setup>
import TodoStatistics from "@/components/TodoStatistics.vue";
import TodoClearButton from "@/components/TodoClearButton.vue";
import { computed } from "vue";

const props = defineProps(["todos"]);

const doingNum = computed(() => {
  return props.todos.filter((item) => item.status === "doing").length;
});

const doneNum = computed(() => {
  return props.todos.filter((item) => item.status === "done").length;
});
</script>

<style scoped lang="scss">
.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 0 20px;
  height: 50px;
  border: 1px solid greenyellow;
}
</style>
